<!DOCTYPE html><html><head><title>Ext.XTemplate | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.XTemplate',
        docClass: 'Ext.XTemplate',
        docReq: 'Ext.XTemplate',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'XTemplate.html#Ext-XTemplate';
    clsInfo = {"methods":["append","apply","applyTemplate","compile","from","insertAfter","insertBefore","insertFirst","overwrite","set"],"cfgs":["codeRe","disableFormats"],"properties":[],"events":[],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/XTemplate.html#Ext-XTemplate" target="_blank">Ext.XTemplate</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.Template.html" rel="Ext.Template" class="cls docClass">Ext.Template</a><div class="subclass"><strong>Ext.XTemplate</strong></div></div></pre><p>A template class that supports advanced functionality like:<div class="mdetail-params"><ul>
<li>Autofilling arrays using templates and sub-templates</li>
<li>Conditional processing with basic comparison operators</li>
<li>Basic math function support</li>
<li>Execute arbitrary inline code with special built-in template variables</li>
<li>Custom member functions</li>
<li>Many special tags and built-in operators that aren't defined as part of
the API, but are supported in the templates that can be created</li>
</ul></div></p>


<p>XTemplate provides the templating mechanism built into:<div class="mdetail-params"><ul>
<li><a href="Ext.view.View.html" rel="Ext.view.View" class="docClass">Ext.view.View</a></li>
</ul></div></p>


<p>The <a href="Ext.Template.html" rel="Ext.Template" class="docClass">Ext.Template</a> describes
the acceptable parameters to pass to the constructor. The following
examples demonstrate all of the supported features.</p></p>

<div class="mdetail-params"><ul>

<li><b><u>Sample Data</u></b>
<div class="sub-desc">
<p>This is the data object used for reference in each code example:</p>
<pre class="prettyprint"><code>var data = {
name: 'Tommy Maintz',
title: 'Lead Developer',
company: 'Sencha Inc.',
email: 'tommy@sencha.com',
address: '5 Cups Drive',
city: 'Palo Alto',
state: 'CA',
zip: '44102',
drinks: ['Coffee', 'Soda', 'Water'],
kids: [{
        name: 'Joshua',
        age:3
    },{
        name: 'Matthew',
        age:2
    },{
        name: 'Solomon',
        age:0
}]
};
 </code></pre>
</div>
</li>


<li><b><u>Auto filling of arrays</u></b>
<div class="sub-desc">
<p>The <b><tt>tpl</tt></b> tag and the <b><tt>for</tt></b> operator are used
to process the provided data object:
<ul>
<li>If the value specified in <tt>for</tt> is an array, it will auto-fill,
repeating the template block inside the <tt>tpl</tt> tag for each item in the
array.</li>
<li>If <tt>for="."</tt> is specified, the data object provided is examined.</li>
<li>While processing an array, the special variable <tt>{#}</tt>
will provide the current array index + 1 (starts at 1, not 0).</li>
</ul>
</p>
<pre class="prettyprint"><code>&lt;tpl <b>for</b>=".">...&lt;/tpl>       // loop through array at root node
&lt;tpl <b>for</b>="foo">...&lt;/tpl>     // loop through array at foo node
&lt;tpl <b>for</b>="foo.bar">...&lt;/tpl> // loop through array at foo.bar node
 </code></pre>
Using the sample data above:
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Kids: ',
    '&lt;tpl <b>for</b>=".">',       // process the data.kids node
        '&lt;p>{#}. {name}&lt;/p>',  // use current array index to autonumber
    '&lt;/tpl>&lt;/p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
 </code></pre>
<p>An example illustrating how the <b><tt>for</tt></b> property can be leveraged
to access specified members of the provided data object to populate the template:</p>
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Name: {name}&lt;/p>',
    '&lt;p>Title: {title}&lt;/p>',
    '&lt;p>Company: {company}&lt;/p>',
    '&lt;p>Kids: ',
    '&lt;tpl <b>for="kids"</b>>',     // interrogate the kids property within the data
        '&lt;p>{name}&lt;/p>',
    '&lt;/tpl>&lt;/p>'
);
tpl.overwrite(panel.body, data);  // pass the root node of the data object
 </code></pre>
<p>Flat arrays that contain values (and not objects) can be auto-rendered
using the special <b><tt>{.}</tt></b> variable inside a loop.  This variable
will represent the value of the array at the current index:</p>
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>{name}\&#39;s favorite beverages:&lt;/p>',
    '&lt;tpl for="drinks">',
        '&lt;div> - {.}&lt;/div>',
    '&lt;/tpl>'
);
tpl.overwrite(panel.body, data);
 </code></pre>
<p>When processing a sub-template, for example while looping through a child array,
you can access the parent object's members via the <b><tt>parent</tt></b> object:</p>
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Name: {name}&lt;/p>',
    '&lt;p>Kids: ',
    '&lt;tpl for="kids">',
        '&lt;tpl if="age &amp;gt; 1">',
            '&lt;p>{name}&lt;/p>',
            '&lt;p>Dad: {<b>parent</b>.name}&lt;/p>',
        '&lt;/tpl>',
    '&lt;/tpl>&lt;/p>'
);
tpl.overwrite(panel.body, data);
 </code></pre>
</div>
</li>


<li><b><u>Conditional processing with basic comparison operators</u></b>
<div class="sub-desc">
<p>The <b><tt>tpl</tt></b> tag and the <b><tt>if</tt></b> operator are used
to provide conditional checks for deciding whether or not to render specific
parts of the template. Notes:<div class="sub-desc"><ul>
<li>Double quotes must be encoded if used within the conditional</li>
<li>There is no <tt>else</tt> operator &mdash; if needed, two opposite
<tt>if</tt> statements should be used.</li>
</ul></div>
<pre class="prettyprint"><code>&lt;tpl if="age &gt; 1 &amp;&amp; age &lt; 10">Child&lt;/tpl>
&lt;tpl if="age >= 10 && age < 18">Teenager&lt;/tpl>
&lt;tpl <b>if</b>="this.isGirl(name)">...&lt;/tpl>
&lt;tpl <b>if</b>="id==\'download\'">...&lt;/tpl>
&lt;tpl <b>if</b>="needsIcon">&lt;img src="{icon}" class="{iconCls}"/>&lt;/tpl>
// no good:
&lt;tpl if="name == "Tommy"">Hello&lt;/tpl>
// encode &#34; if it is part of the condition, e.g.
&lt;tpl if="name == &#38;quot;Tommy&#38;quot;">Hello&lt;/tpl>
</code></pre>
Using the sample data above:
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Name: {name}&lt;/p>',
    '&lt;p>Kids: ',
    '&lt;tpl for="kids">',
        '&lt;tpl if="age &amp;gt; 1">',
            '&lt;p>{name}&lt;/p>',
        '&lt;/tpl>',
    '&lt;/tpl>&lt;/p>'
);
tpl.overwrite(panel.body, data);
 </code></pre>
</div>
</li>


<li><b><u>Basic math support</u></b>
<div class="sub-desc">
<p>The following basic math operators may be applied directly on numeric
data values:</p>
<pre class="prettyprint">+ - * /
</pre>
For example:
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Name: {name}&lt;/p>',
    '&lt;p>Kids: ',
    '&lt;tpl for="kids">',
        '&lt;tpl if="age &amp;gt; 1">',  // <-- Note that the &gt; is encoded
            '&lt;p>{#}: {name}&lt;/p>',  // <-- Auto-number each item
            '&lt;p>In 5 Years: {age+5}&lt;/p>',  // <-- Basic math
            '&lt;p>Dad: {parent.name}&lt;/p>',
        '&lt;/tpl>',
    '&lt;/tpl>&lt;/p>'
);
tpl.overwrite(panel.body, data);
 </code></pre>
</div>
</li>


<li><b><u>Execute arbitrary inline code with special built-in template variables</u></b>
<div class="sub-desc">
<p>Anything between <code>{[ ... ]}</code> is considered code to be executed
in the scope of the template. There are some special variables available in that code:
<ul>
<li><b><tt>values</tt></b>: The values in the current scope. If you are using
scope changing sub-templates, you can change what <tt>values</tt> is.</li>
<li><b><tt>parent</tt></b>: The scope (values) of the ancestor template.</li>
<li><b><tt>xindex</tt></b>: If you are in a looping template, the index of the
loop you are in (1-based).</li>
<li><b><tt>xcount</tt></b>: If you are in a looping template, the total length
of the array you are looping.</li>
</ul>
This example demonstrates basic row striping using an inline code block and the
<tt>xindex</tt> variable:</p>
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Name: {name}&lt;/p>',
    '&lt;p>Company: {[values.company.toUpperCase() + ", " + values.title]}&lt;/p>',
    '&lt;p>Kids: ',
    '&lt;tpl for="kids">',
        '&lt;div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
        '{name}',
        '&lt;/div>',
    '&lt;/tpl>&lt;/p>'
 );
tpl.overwrite(panel.body, data);
 </code></pre>
</div>
</li>

<li><b><u>Template member functions</u></b>
<div class="sub-desc">
<p>One or more member functions can be specified in a configuration
object passed into the XTemplate constructor for more complex processing:</p>
<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
    '&lt;p>Name: {name}&lt;/p>',
    '&lt;p>Kids: ',
    '&lt;tpl for="kids">',
        '&lt;tpl if="this.isGirl(name)">',
            '&lt;p>Girl: {name} - {age}&lt;/p>',
        '&lt;/tpl>',
         // use opposite if statement to simulate 'else' processing:
        '&lt;tpl if="this.isGirl(name) == false">',
            '&lt;p>Boy: {name} - {age}&lt;/p>',
        '&lt;/tpl>',
        '&lt;tpl if="this.isBaby(age)">',
            '&lt;p>{name} is a baby!&lt;/p>',
        '&lt;/tpl>',
    '&lt;/tpl>&lt;/p>',
    {
        // XTemplate configuration:
        compiled: true,
        // member functions:
        isGirl: function(name){
           return name == 'Sara Grace';
        },
        isBaby: function(age){
           return age < 1;
        }
    }
);
tpl.overwrite(panel.body, data);
 </code></pre>
</div>
</li>

</ul></div>

<div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-codeRe" class="member f ni"><a href="Ext.XTemplate.html#config-codeRe" rel="config-codeRe" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-cfg-codeRe" class="viewSource">view source</a></div><a name="codeRe"></a><a name="config-codeRe"></a><a href="Ext.XTemplate.html#" rel="config-codeRe" class="cls expand">codeRe</a><span> : RegExp</span></div><div class="description"><div class="short"><p>The regular expression used to match code variables (default: matches <tt>{[expression]}</tt>).</p>
</div><div class="long"><p>The regular expression used to match code variables (default: matches <tt>{[expression]}</tt>).</p>
</div></div></div><div id="config-disableFormats" class="member inherited"><a href="Ext.XTemplate.html#config-disableFormats" rel="config-disableFormats" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-cfg-disableFormats" class="viewSource">view source</a></div><a name="disableFormats"></a><a name="config-disableFormats"></a><a href="Ext.XTemplate.html#" rel="config-disableFormats" class="cls expand">disableFormats</a><span> : Boolean</span></div><div class="description"><div class="short">true to disable format functions in the template. If the template doesn't contain format functions, setting
disableFo...</div><div class="long"><p>true to disable format functions in the template. If the template doesn't contain format functions, setting
disableFormats to true will reduce apply time (defaults to false)</p>
</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-append" class="member f inherited"><a href="Ext.XTemplate.html#method-append" rel="method-append" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-append" class="viewSource">view source</a></div><a name="append"></a><a name="method-append"></a><a href="Ext.XTemplate.html#" rel="method-append" class="cls expand">append</a>(
<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 : HTMLElement/Ext.core.Element</div><div class="description"><div class="short">Applies the supplied values to the template and appends
the new node(s) to the specified el.

For example usage see t...</div><div class="long"><p>Applies the supplied <code>values</code> to the template and appends
the new node(s) to the specified <code>el</code>.</p>

<p>For example usage <a href="Ext.XTemplate.html#Template" rel="Ext.XTemplate#Template" class="docClass">see the constructor</a>.</p>

<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
</div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
or an object (i.e. <code>{foo: 'bar'}</code>).</p>
</div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
</li></ul></div></div></div><div id="method-apply" class="member ni"><a href="Ext.XTemplate.html#method-apply" rel="method-apply" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-apply" class="viewSource">view source</a></div><a name="apply"></a><a name="method-apply"></a><a href="Ext.XTemplate.html#" rel="method-apply" class="cls expand">apply</a>(
<span class="pre">Object/Array values</span>)
 : String</div><div class="description"><div class="short"><p>Alias for <a href="Ext.XTemplate.html#applyTemplate" rel="Ext.XTemplate#applyTemplate" class="docClass">applyTemplate</a>
Returns an HTML fragment of this template with the specified values applied.</p>
</div><div class="long"><p>Alias for <a href="Ext.XTemplate.html#applyTemplate" rel="Ext.XTemplate#applyTemplate" class="docClass">applyTemplate</a>
Returns an HTML fragment of this template with the specified values applied.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
</li></ul></div></div></div><div id="method-applyTemplate" class="member ni"><a href="Ext.XTemplate.html#method-applyTemplate" rel="method-applyTemplate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-applyTemplate" class="viewSource">view source</a></div><a name="applyTemplate"></a><a name="method-applyTemplate"></a><a href="Ext.XTemplate.html#" rel="method-applyTemplate" class="cls expand">applyTemplate</a>(
<span class="pre">Object values</span>)
 : String</div><div class="description"><div class="short"><p>Returns an HTML fragment of this template with the specified values applied.</p>
</div><div class="long"><p>Returns an HTML fragment of this template with the specified values applied.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">values</span> : Object<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
</li></ul></div></div></div><div id="method-compile" class="member ni"><a href="Ext.XTemplate.html#method-compile" rel="method-compile" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-compile" class="viewSource">view source</a></div><a name="compile"></a><a name="method-compile"></a><a href="Ext.XTemplate.html#" rel="method-compile" class="cls expand">compile</a> : Function</div><div class="description"><div class="short"><p>Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.</p>
</div><div class="long"><p>Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span>&nbsp; &nbsp;<p>The compiled function</p>
</li></ul></div></div></div><div id="method-from" class="member ni"><a href="Ext.XTemplate.html#method-from" rel="method-from" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-from" class="viewSource">view source</a></div><a name="from"></a><a name="method-from"></a><a href="Ext.XTemplate.html#" rel="method-from" class="cls expand">from</a>(
<span class="pre">String/HTMLElement el, Object config</span>)
 : Ext.Template</div><div class="description"><div class="short"><p>Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</p>
</div><div class="long"><p>Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : String/HTMLElement<div class="sub-desc"><p>A DOM element or its id</p>
</div></li><li><span class="pre">config</span> : Object<div class="sub-desc">
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>The created template</p>
</li></ul></div></div></div><div id="method-insertAfter" class="member inherited"><a href="Ext.XTemplate.html#method-insertAfter" rel="method-insertAfter" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-insertAfter" class="viewSource">view source</a></div><a name="insertAfter"></a><a name="method-insertAfter"></a><a href="Ext.XTemplate.html#" rel="method-insertAfter" class="cls expand">insertAfter</a>(
<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and inserts the new node(s) after el.</p>
</div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) after el.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
</div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
</div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
</li></ul></div></div></div><div id="method-insertBefore" class="member inherited"><a href="Ext.XTemplate.html#method-insertBefore" rel="method-insertBefore" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-insertBefore" class="viewSource">view source</a></div><a name="insertBefore"></a><a name="method-insertBefore"></a><a href="Ext.XTemplate.html#" rel="method-insertBefore" class="cls expand">insertBefore</a>(
<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and inserts the new node(s) before el.</p>
</div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) before el.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
</div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
</div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
</li></ul></div></div></div><div id="method-insertFirst" class="member inherited"><a href="Ext.XTemplate.html#method-insertFirst" rel="method-insertFirst" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-insertFirst" class="viewSource">view source</a></div><a name="insertFirst"></a><a name="method-insertFirst"></a><a href="Ext.XTemplate.html#" rel="method-insertFirst" class="cls expand">insertFirst</a>(
<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and inserts the new node(s) as the first child of el.</p>
</div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) as the first child of el.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
</div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
</div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
</li></ul></div></div></div><div id="method-overwrite" class="member inherited"><a href="Ext.XTemplate.html#method-overwrite" rel="method-overwrite" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-overwrite" class="viewSource">view source</a></div><a name="overwrite"></a><a name="method-overwrite"></a><a href="Ext.XTemplate.html#" rel="method-overwrite" class="cls expand">overwrite</a>(
<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>
</div><div class="long"><p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
</div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
</div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
</li></ul></div></div></div><div id="method-set" class="member inherited"><a href="Ext.XTemplate.html#method-set" rel="method-set" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-set" class="viewSource">view source</a></div><a name="set"></a><a name="method-set"></a><a href="Ext.XTemplate.html#" rel="method-set" class="cls expand">set</a>(
<span class="pre">String html, [Boolean compile]</span>)
 : Ext.Template</div><div class="description"><div class="short"><p>Sets the HTML used as the template and optionally compiles it.</p>
</div><div class="long"><p>Sets the HTML used as the template and optionally compiles it.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">html</span> : String<div class="sub-desc">
</div></li><li><span class="pre">compile</span> : Boolean<div class="sub-desc"><p>(optional) True to compile the template (defaults to undefined)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>